<script setup>
    import { ref, defineProps, defineEmits, watch } from 'vue';
    const props = defineProps(['formItemConfig']);
    const emit = defineEmits(['updateFormItemValue']);
    const data = ref({
        type: props.formItemConfig.type || "",
        placeholder: props.formItemConfig.placeholder || "",
        label: props.formItemConfig.label || "",
        value: props.formItemConfig.value || (props.formItemConfig.type === "checkbox" || props.formItemConfig.type === "radio" ? [] : ""),
        children: props.formItemConfig.children || []
    });
    watch(data.value, (newVal, oldVal) => {
        emit('updateFormItemValue', newVal);
    });
</script>
<template>
    <div class="container">
        <!-- select -->
        <el-form-item v-if="data.type === 'select'" :label="data.label" style="margin: 0 !important;">
            <el-select :placeholder="data.placeholder" v-model="data.value">
                <el-option v-for="item in data.children" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <!-- checkbox -->
        <el-form-item v-else-if="data.type === 'checkbox'"  :label="data.label" style="margin: 0 !important;">
            <el-checkbox-group v-model="data.value">
                <el-checkbox v-for="item in data.children" :key="item.value" :label="item.label" :value="item.value"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <!-- radio -->
        <el-form-item v-else-if="data.type === 'radio'"  :label="data.label" style="margin: 0 !important;">
            <el-radio-group v-model="data.value">
                <el-radio v-for="item in data.children" :key="item.value" :label="item.label" :value="item.value"></el-radio>
            </el-radio-group>
        </el-form-item>
        <!-- date -->
        <el-form-item v-else-if="data.type === 'date'"  :label="data.label" style="margin: 0 !important;">
            <el-date-picker v-model="data.value" type="daterange" size="normal">
            </el-date-picker>
        </el-form-item>
        <!-- datetime -->
        <el-form-item v-else-if="data.type === 'datetime'"  :label="data.label" style="margin: 0 !important;">
            <el-date-picker v-model="data.value" type="datetimerange" size="normal">
            </el-date-picker>
        </el-form-item>
        <!-- textarea -->
        <el-form-item v-else-if="data.type === 'textarea'"  :label="data.label" style="margin: 0 !important;">
            <el-input :placeholder="data.placeholder" v-model="data.value" type="textarea"></el-input>
        </el-form-item>
        <!-- input(default) -->
        <el-form-item v-else :label="data.label" style="margin: 0 !important;">
            <el-input :placeholder="data.placeholder" v-model="data.value"></el-input>
        </el-form-item>
    </div>
</template>
<style lang="scss" scoped>
.container {
    display: inline-block;
}
</style>